<template>
    <div>
        <div class="title text-6 mb-8">停车记录</div>
        <div class="data">
            <div
                class="mb-3 p-4 bg-blue-50 rounded-2"
                v-for="item in user.parkRecords"
            >
                <div>
                    <div class="mb-2">
                        停车时间：{{ dateFromat(item.enterTime) }}
                    </div>
                    <div class="mb-2">
                        离开时间：{{ dateFromat(item.leaveTime) }}
                    </div>
                    <div class="mb-2">
                        停车时长时间：{{
                            item.leaveTime
                                ? dayjs(item.leaveTime).diff(
                                      item.enterTime,
                                      'hour'
                                  ) +
                                  1 +
                                  '小时'
                                : '未离开'
                        }}
                    </div>
                    <div class="mb-2">停车场：{{ item.parkName }}</div>
                    <div class="mb-2">
                        总费用：{{
                            item.payRecordAmount !== null
                                ? item.payRecordAmount + '元'
                                : '未付款'
                        }}
                    </div>
                    <div class="mb-2">
                        支付状态：{{
                            item.payRecordStatus ? '已支付' : '未支付'
                        }}
                    </div>
                    <div class="flex justify-end">
                        <el-button
                            v-if="!item.payRecordStatus"
                            type="success"
                            icon="FullScreen"
                            @click="handlePay(item)"
                            >支付</el-button
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getOwnerByIdApi } from '@/apis/owner'
import { getParkRecordPageApi } from '@/apis/parkRecord'
import { dateFromat } from '@/utils/dateFormat'
import dayjs from 'dayjs'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const user = ref<any>({})

// 获取用户信息
const getData = async () => {
    const { id } = JSON.parse(localStorage.getItem('user')) as any
    const res = await getOwnerByIdApi(id)
    if (res) {
        user.value = res
    }
    const carIds = user.value.cars.map((v: any) => v.id).join(',')
    const parkRecords = (await getParkRecordPageApi({
        carIds,
        page: 1,
        size: 1000,
    })) as any
    user.value.parkRecords = parkRecords.rows
}
getData()

// 点击支付按钮
const handlePay = (record) => {
    router.push({
        path: '/m/pay',
        query: {
            recordId: record.id,
            carNum: record.carNum,
        },
    })
}
</script>

<style scoped></style>
